{extend name="layout/iframe" /}

{block name="content"}
<div class="layui-card-body layui-layout-admin" style="padding: 15px;">
    <form class="layui-form" action="" lay-filter="component-form-group">
        <div class="layui-form-item layui-form-text">
            <p>时间段</p>
        </div>
        <div class="layui-form-item layui-form-text">
            <!--<input type="checkbox" class="time_range" name="time_range[]" title="00:00-02:00" value="0">
            <div class="layui-unselect layui-form-checkbox">
                <span>00:00-02:00</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="02:00-04:00" value="2">
            <div class="layui-unselect layui-form-checkbox">
                <span>02:00-04:00</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="04:00-06:00" value="4">
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                <span>04:00-06:00</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="06:00-08:00" value="6">
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                <span>06:00-08:00</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="08:00-10:00" value="8">
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                <span>08:00-10:00</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="10:00-12:00" value="10">
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                <span>10:00-12:00</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="12:00-14:00" value="12">
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                <span>12:00-14:00</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="14:00-16:00" value="14">
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                <span>14:00-16:00</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="16:00-18:00" value="16">
            <div class="layui-unselect layui-form-checkbox">
                <span>16:00-18:00</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="18:00-20:00" value="18">
            <div class="layui-unselect layui-form-checkbox">
                <span>18:00-20:00</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="20:00-22:00" value="20">
            <div class="layui-unselect layui-form-checkbox">
                <span>20:00-22:00</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="22:00-24:00" value="22">
            <div class="layui-unselect layui-form-checkbox">
                <span>22:00-24:00</span><i class="layui-icon layui-icon-ok"></i>
            </div>-->

            <input type="checkbox" class="time_range" name="time_range[]" title="07:00-09:59" value="7">
            <div class="layui-unselect layui-form-checkbox">
                <span>07:00-09:59</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="10:00-12:59" value="10">
            <div class="layui-unselect layui-form-checkbox">
                <span>10:00-12:59</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="13:00-15:59" value="13">
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                <span>13:00-15:59</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="16:00-18:59" value="16">
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                <span>16:00-18:59</span><i class="layui-icon layui-icon-ok"></i>
            </div>
            <input type="checkbox" class="time_range" name="time_range[]" title="19:00-21:59" value="19">
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                <span>19:00-21:59</span><i class="layui-icon layui-icon-ok"></i>
            </div>
        </div>

        <div class="layui-form-item layui-row layui-col-xs12">
            <div class="layui-input-block">
                <div class="layui-footer">
                    <button type="button" class="layui-btn layui-btn-primary close-btn"><i class="layui-icon">&#xe65c;</i> 取消</button>
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="layConfirm">确定 <i class="layui-icon">&#xe605;</i></button>
                </div>
            </div>
        </div>
    </form>
</div>
{/block}

{block name="pagescript"}
<script type="text/javascript">
    layui.use(['form', 'layer', 'laydate'], function(){

        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laydate = layui.laydate;


        // 数据初始化
        var initData = function() {
            var effective_date = $(parent.window.frames[0].document).find('.effective_date').val();
            if (effective_date) {
                $("input[name^='time_range']").each(function () {
                    if (effective_date.indexOf(',' + $(this).val() + ',') >= 0) {
                        $(this).prop('checked', true);
                        $(this).next().addClass('layui-form-checked');
                    }
                });
            }
        };

        initData();

        // 表单提交
        form.on("submit(layConfirm)", function(data){
            var time_range_len = $("input[name^='time_range']:checked").length;
            if(time_range_len <= 0){
                layer.msg('请至少选择一个时间段！', {icon: 5});
                return false;
            }

            var effective_date = ',';
            $("input[name^='time_range']:checked").each(function () {
                effective_date += $(this).val() + ',';
            });
            $(parent.window.frames[0].document).find('.effective_date').val(effective_date);

            var index = parent.layer.getFrameIndex(window.name);
            layer.close(index);
        })
    });
</script>
{/block}